<template>
  <!--时间线-->
  <div class="timeLine" style="overflow: hidden;">
    <div class="ul_box">
      <ul class="my_timeline" style="margin: 10px;">
        <li v-for="(item,index) in saleTimeLineList" :key="index" class="my_timeline_item">
          <!--圈圈节点-->
          <!--<img src="/static/image/login_bg.jpg" class="my_timeline_node" style="width:20px;height:10px;">-->
          <div :style="{backgroundColor: item.bgcolor, width: item.size + 'px', height: item.size + 'px'}" :class="{active: index == saleTimeIndex, nodeTitle: (item.url ? false : true)}" class="my_timeline_node" @click="changeActive(index)"/>
          <!--线-->
          <div v-if="(index + 1) != saleTimeLineList.length" class="my_timeline_item_line"/>
          <!--标注-->
          <div :style="{color: item.color, fontSize: item.fontsize + 'px'}" class="my_timeline_item_content">
            <template v-if="item.url">
              <router-link v-if="item.url" :to="item.url">
                {{ item.content }}
              </router-link>
            </template>
            <template v-else>
              {{ item.content }}
            </template>
          </div>
        </li>
      </ul>
      <ul class="my_timeline" style="margin: 10px;">
        <li v-for="(item,index) in purchaseTimeLineList" :key="index" class="my_timeline_item">
          <!--圈圈节点-->
          <div :style="{backgroundColor: item.bgcolor, width: item.size + 'px', height: item.size + 'px'}" :class="{active: index == purchaseTimeIndex, nodeTitle: (item.url ? false : true)}" class="my_timeline_node" @click="changePurchaseActive(index)"/>
          <!--线-->
          <div v-if="(index + 1) != purchaseTimeLineList.length" class="my_timeline_item_line"/>
          <!--标注-->
          <div :style="{color: item.color, fontSize: item.fontsize + 'px'}" class="my_timeline_item_content">
            <template v-if="item.url">
              <router-link v-if="item.url" :to="item.url">
                {{ item.content }}
              </router-link>
            </template>
            <template v-else>
              {{ item.content }}
            </template>
          </div>
        </li>
      </ul>
      <ul class="my_timeline" style="margin: 10px;">
        <li v-for="(item,index) in prodTimeLineList" :key="index" class="my_timeline_item">
          <!--圈圈节点-->
          <div :style="{backgroundColor: item.bgcolor, width: item.size + 'px', height: item.size + 'px'}" :class="{active: index == saleTimeIndex, nodeTitle: (item.url ? false : true)}" class="my_timeline_node" @click="changeProdActive(index)"/>
          <!--线-->
          <div v-if="(index + 1) != prodTimeLineList.length" class="my_timeline_item_line"/>
          <!--标注-->
          <div :style="{color: item.color, fontSize: item.fontsize + 'px'}" class="my_timeline_item_content">
            <template v-if="item.url">
              <router-link v-if="item.url" :to="item.url">
                {{ item.content }}
              </router-link>
            </template>
            <template v-else>
              {{ item.content }}
            </template>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'

export default {
  checkPermission,
  components: {
  },
  data() {
    return {
      saleTimeIndex: 3,
      saleTimeLineList: [{
        content: '销售管理',
        url: '',
        color: '#069909',
        fontsize: 20,
        size: '30',
        bgcolor: '#3f64ed',
        icon: 'el-iconprev'
      }, {
        content: '线索',
        url: '/crm/clue',
        color: '#999',
        fontsize: 18,
        size: '28',
        bgcolor: '#3f64ed',
        icon: 'el-iconprev'
      }, {
        content: '客户',
        url: '/crm/custom',
        color: '#999',
        fontsize: 18,
        size: '28',
        bgcolor: '#e4e7ed'
      }, {
        content: '合同',
        url: '/crm/contract',
        color: '#999',
        fontsize: 18,
        size: '28',
        bgcolor: '#e4e7ed'
      }, {
        content: '报价',
        url: '/sale/quote',
        color: '#999',
        fontsize: 18,
        size: '28',
        bgcolor: '#e4e7ed'
      }, {
        content: '销售订单',
        url: '/sale/order',
        color: '#999',
        fontsize: 18,
        size: '28',
        bgcolor: '#e4e7ed'
      }, {
        content: '销售出库',
        url: '/prod/stockoutorder',
        color: '#999',
        fontsize: 18,
        size: '28',
        bgcolor: '#e4e7ed'
      }, {
        content: '收款',
        url: '/fin/finwaitorder',
        color: '#999',
        fontsize: 18,
        size: '28',
        bgcolor: '#e4e7ed'
      }, {
        content: '发票',
        url: '/fin/fininvoice',
        color: '#999',
        fontsize: 18,
        size: '28',
        bgcolor: '#e4e7ed'
      }],
      purchaseTimeIndex: 2,
      purchaseTimeLineList: [{
        content: '采购管理',
        url: '',
        color: '#994f0b',
        fontsize: 20,
        size: '30',
        bgcolor: '#3f64ed',
        icon: 'el-iconprev'
      }, {
        content: '询价',
        url: '/purchase/inquiry',
        color: '#999',
        fontsize: 18,
        size: '28',
        bgcolor: '#3f64ed',
        icon: 'el-iconprev'
      }, {
        content: '采购订单',
        url: '/purchase/po',
        color: '#999',
        fontsize: 18,
        size: '28',
        bgcolor: '#e4e7ed'
      }, {
        content: '采购入库',
        url: '/prod/stockinpo',
        color: '#999',
        fontsize: 18,
        size: '28',
        bgcolor: '#e4e7ed'
      }, {
        content: '付款',
        url: '/fin/finwaitpo',
        color: '#999',
        fontsize: 18,
        size: '28',
        bgcolor: '#e4e7ed'
      }],
      prodTimeIndex: 3,
      prodTimeLineList: [{
        content: '生产管理',
        url: '',
        color: '#261a99',
        fontsize: 20,
        size: '30',
        bgcolor: '#3f64ed',
        icon: 'el-iconprev'
      }, {
        content: '产品',
        url: '/base/item',
        color: '#999',
        fontsize: 18,
        size: '28',
        bgcolor: '#3f64ed',
        icon: 'el-iconprev'
      }, {
        content: 'BOM',
        url: '/base/bom',
        color: '#999',
        fontsize: 18,
        size: '28',
        bgcolor: '#e4e7ed'
      }, {
        content: 'MRP',
        url: '/prodmrp/mrp',
        color: '#999',
        fontsize: 18,
        size: '28',
        bgcolor: '#e4e7ed'
      }, {
        content: '生产入库',
        url: '/prodmrp/oem/prodcomplete',
        color: '#999',
        fontsize: 18,
        size: '28',
        bgcolor: '#e4e7ed'
      }, {
        content: '盘点',
        url: '/prod/stockinventory',
        color: '#999',
        fontsize: 18,
        size: '28',
        bgcolor: '#e4e7ed'
      }]
    }
  },
  mounted() {
  },
  methods: {
    changeActive(index) {
      this.saleTimeIndex = index
    },
    changePurchaseActive(index) {
      this.purchaseTimeIndex = index
    },
    changeProdActive(index) {
      this.prodTimeIndex = index
    }
  }
}
</script>

<style scoped>
.ul_box {
  width: 100%;
  display: inline-block;
  float: left;
  margin-top: 2px;
}
.my_timeline_item {
  display: inline-block;
  width: 10%;
}
.my_timeline_node {
  box-sizing: border-box;
  border-radius: 50%;
  cursor: pointer;
  background-color: #fff !important;
  border: 6px solid #c2f681;
}
.my_timeline_node.active {
  background-color: #fff !important;
  border: 6px solid #f68720;
}
.my_timeline_node.nodeTitle {
  background-color: #ff4930 !important;
  border: 6px solid #589df6;
}

.my_timeline_item_line {
  width: 100%;
  height: 10px;
  margin: -14px 0 0 28px;
  border-top: 2px solid #E4E7ED;
  border-left: none;
}
.my_timeline_item_content {
  margin: 10px 0 0 -10px;
}
</style>
